<template>
  <div>
    <tips />
    <!--复选框组
    disabled==true的时候是禁用状态  false是启用状态
    isChecked=true的时候是被点击了，被点击的时候不能使用复选框（禁用）
    刚好两个需求状态一样
    -->

    <div class="group1" v-for="item in cartList" :key="item.id">
      <!--当checked为1的时候把item.product_id传入到result数组中-->
      <van-cell title="中央商场" @click="deleteShop(item)">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <!--删除按钮，也是在for循环里-->
        <template #right-icon>
          <van-icon name="delete-o" class="search-icon" />
        </template>
      </van-cell>

      <van-swipe-cell class="cell">
        <van-checkbox-group v-model="result" class="c1">
          <van-checkbox :name="item.product_id" @click="goodClick(item)">
          </van-checkbox>
        </van-checkbox-group>
        <van-card
          class="card"
          :price="item.retail_price.toFixed(2)"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        >
          <template #footer>
            <!--商品的数量就是item.number-->
            <van-stepper v-model="item.number" @change="stepChange(item)" />
          </template>
        </van-card>
      </van-swipe-cell>
    </div>
    <!--tabbar-->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <!--全选按钮也要禁用-->
      <van-checkbox v-model="checkedAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import tips from "../components/tips";
import {
  GetCartData,
  GetGoodsClick,
  GetStepper,
  GetShopDelete
} from "../request/api";
export default {
  data() {
    return {
      // number:1,
      // 复选框数组
      //   checked为1就把那个商品的id存入
      result: [],
      //   商品列表数组
      cartList: [],
      //   商品总数
      cartTotal: {},
      //   是否显示步进器和按钮被点击是同一个点击事件,true表示点击，false未被点击
      isClicked: false
    };
  },
  components: {
    tips
  },
  computed: {
    //   全选按钮
    //   return this.cartTotal.checkedGoodsAmount = this.cartTotal.goodsCount ? true : false
    checkedAll: {
      get() {
        return this.result.length == this.cartList.length ? true : false;
      },
      set(val) {
        //   做一个判断使全选在步进器时被禁用
        if (this.isClicked) {
          return;
        } else {
          let arr = [];
          this.cartList.map(val => {
            arr.push(val.product_id);
          });
          GetGoodsClick({
            //   将一个数组转字符串join默认以逗号隔开
            // isChecked代表即将要变成的选中状态
            // val是布尔值 true变成1，false变成0
            // 首先要拿到carList中的每一项的product_id result不能用了新建一个数组
            isChecked: val ? 1 : 0,
            productIds: arr.join()
          }).then(res => {
            //   调用接口
            if (res.errno == 0) {
              console.log(res.data);
              this.totalFn(res.data);
            }
          });
        }
      }
    }
  },
  methods: {
    onSubmit() {
      this.$toast("已提交");
    },
    // 商品卡片的点击事件(单选)
    goodClick(item) {
      if (this.isClicked) {
        return;
      } else {
        GetGoodsClick({
          // isChecked代表即将要变成的选中状态
          isChecked: item.checked == 1 ? 0 : 1,
          productIds: item.product_id.toString()
        }).then(res => {
          //   调用接口
          if (res.errno == 0) {
            console.log(res.data);
            this.totalFn(res.data);
          }
        });
      }
    },
    // 获取数据
    totalFn(data) {
      let { cartList, cartTotal } = data;
      this.cartList = cartList;
      this.cartTotal = cartTotal;
      //   清空点击数组,重新加东西
      this.result = [];
      // 判断checked==1是否被选中
      this.cartList.map(val => {
        if (val.checked == 1) {
          this.result.push(val.product_id);
        }
      });
    },
    // 商品步进器事件  stepper自带的value
    stepChange(item) {
      GetStepper({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      }).then(res => {
        if (res.errno == 0) {
          console.log(res.data);
          this.totalFn(res.data);
        }
      });
    },
    // 商品删除
    deleteShop(item) {
      GetShopDelete({ productIds: item.product_id.toString() }).then(res => {
        if (res.errno == 0) {
          this.totalFn(res.data);
        }
      });
    }
  },
  created() {
    //   请求商品列表数量
    GetCartData().then(res => {
      // 渲染（抽离）
      console.log(res.data);
      if (res.errno == 0) {
        this.totalFn(res.data);
      }
    });
  }
};
</script>
<style lang="less" scoped>
.van-submit-bar {
  bottom: 50px;
}
.group1 {
}
/deep/.cell {
}
.c1 {
}
.card {
}
.van-stepper {
  text-align: right;
}
.delete-button {
  height: 100%;
}
/deep/.van-checkbox__icon .van-icon {
  position: absolute;
  top: 63px;
  z-index: 100;
}
.van-checkbox {
  position: absolute;
}
/deep/.van-checkbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  overflow: inherit;
  user-select: none;
}
</style>
